import React, {useState} from 'react'

import {
  Switch,
  Redirect,
  Route,
  useParams
} from 'react-router-dom'

import MyLink from '../navlink/MyLink'

export default function theaters() {
  const { id } = useParams()

  return (
    <>
      {/* <Switch>
        <Redirect from="/theaters" to="/theaters/100"></Redirect>
        <Route path="/theaters/100" render={() => <div>100</div>}></Route>
        <Route path="/theaters/100" render={() => <div>100 100</div>}></Route>
      </Switch>
      <Route path="/theaters/200" render={() => <div>200</div>}></Route>
      <Route path="/theaters/200" render={() => <div>200 200</div>}></Route> */}
      <ul>
        {
          Array.from(new Array(5)).map((value, index) => {
            const category = (index+1) * 100
            return (
              <MyLink
                key={index}
                route={{
                  title: category,
                  path: '/theaters/' + category
                }}
                tag='li'
              ></MyLink>
            )
          })
        }
      </ul>
      <div>
        theaters {id}
      </div>
    </>
  )
}